<template>
  <div class="pageDetail">
    <van-nav-bar @click-left="$router.push(path)">
      <!-- @click-left="onClickLeft"
      @click-right="onClickRight" -->
      <template #left>
        <van-icon name="arrow-left" />
        <div class="left">
          <img :src="articles.aut_photo" alt="" />
          <span>{{ articles.aut_name }}</span>
        </div>
      </template>
      <template #right>
        <div class="right">
          <van-button round :type="articles.is_followed ? 'default' : 'info'">{{
            articles.is_followed ? '已关注' : '+ 关注'
          }}</van-button>
        </div>
      </template>
    </van-nav-bar>
    <div class="content">
      <div class="c1">
        {{ articles.title }}
      </div>
      <div class="c2" v-html="articles.content"></div>
      <div class="c3">
        <div v-if="articles.attitude < 0" class="f1">
          <van-button round @click="articleLikings">点赞</van-button>
          <van-button round>不喜欢</van-button>
        </div>
        <div v-else class="f2">
          <van-button round class="active" @click="status">{{
            articles.attitude === 0 ? '喜欢' : '不喜欢'
          }}</van-button>
        </div>
      </div>
      <van-list
        v-if="bol"
        v-model="loding"
        :finished="finished"
        finished-text="没有更多了"
        @load="load"
      >
        <pageComent
          v-for="(item, index) in commentsList"
          :key="index"
          :comment="item"
        ></pageComent>
      </van-list>
    </div>
    <div class="comment">
      <div class="c1">写评论....</div>
      <div class="c2">
        <div>
          <!-- <span>2</span> -->
          <van-icon name="comment-o" :badge="total_count" />
          <!-- <van-badge :content="5">
          </van-badge> -->
        </div>
      </div>
      <div class="c3">
        <van-icon name="star-o" />
      </div>
      <div class="c4">
        <van-icon name="share-o" />
      </div>
    </div>
  </div>
</template>

<script>
import {
  articlesId,
  articleLikings,
  articleDislikes,
  appComments
} from '@/api/page.js'
export default {
  components: {
    pageComent: () => import('./pageComent')
  },
  data () {
    return {
      bol: true, // 下拉刷新开关
      path: this.$route.query.path, // 返回路径
      article_id: this.$route.query.id, // 文章id
      articles: '', // 文章详情
      loding: false, // 加载状态
      finished: false, // 是否加载完成
      offset: '', // 当前页
      commentsList: [], // 评论数组
      total_count: '' // 评论总数
    }
  },
  async created () {
    // 获取文章详情
    const res = await articlesId(this.article_id)
    // 赋值
    this.articles = res.data

    const res1 = await appComments({ type: 'a', source: this.article_id })
    // 评论数据
    this.commentsList = res1.data.results
    // 赋值最后一个id
    this.offset = res1.data.last_id
    // 评论总数
    this.total_count = res1.data.total_count
    this.bol = false
    // 静默刷新
    this.$nextTick(() => {
      this.bol = true
    })
  },
  methods: {
    // 下拉刷新事件
    async load () {
      // 判断数据是否加载完成
      if (this.commentsList.length >= this.total_count) {
        // 加载完成
        this.finished = true
      } else {
        const res = await appComments({
          type: 'a',
          source: this.article_id,
          offset: this.offset
        })
        this.commentsList.push(res.data.results)
        // 状态改变
        this.loding = true
        // 评论数据
        // this.commentsList = res.data.results
      }
    },
    articleLikings () {
      // 无状态时 更改喜欢状态
      articleLikings({ target: this.article_id }).then(res => {
        // 重新赋值
        this.articles.attitude = 1
      })
    },
    // 有状态时切换
    status () {
      if (this.articles.attitude === 0) {
        // 改成喜欢
        this.articleLikings()
      } else if (this.articles.attitude === 1) {
        // 改成不喜欢
        articleDislikes({ target: this.article_id }).then(res => {
          // 重新赋值
          this.articles.attitude = 0
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.van-icon {
  font-size: 16px;
  color: #777777;
}
.left {
  display: flex;
  align-items: center;
  img {
    margin: 0 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: contain;
  }
}
.right {
  .van-button {
    height: 25px;
  }
}
.content {
  margin-bottom: 50px;
  padding: @p15;
  .c1 {
    margin-bottom: 15px;
    font-family: MicrosoftYaHei;
    font-size: 16px;
    font-weight: 600;
    font-stretch: normal;
    line-height: 25px;
    letter-spacing: 2px;
    color: #666666;
  }
  .c2 {
    // 让pre里面的内容自动换行
    ::v-deep pre {
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    font-size: 14px;
    ::v-deep img {
      width: 100%;
      height: 100%;
    }
  }
  .c3 {
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
    .van-button {
      margin-right: 10px;
      height: 30px;
    }
    .f2 {
      .active {
        color: red;
      }
    }
  }
}
.comment {
  background-color: #fff;
  padding: 10px @p15;
  position: fixed;
  display: flex;
  justify-content: space-around;
  align-items: center;
  bottom: 0;
  width: 100%;
  height: 40px;
  .c1 {
    padding-left: 10px;
    flex: 0.7;
    height: 100%;
    border: solid 1px #eeeeee;
    border-radius: 20px;
    font-family: MicrosoftYaHei;
    font-size: 15px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 36px;
    letter-spacing: 1px;
    color: #a7a7a7;
  }
  .c2,
  .c3,
  .c4 {
    padding: 0 10px;
    font-size: 20px;
  }
  .c2 {
    position: relative;
    // span {
    //   position: absolute;
    //   top: -6px;
    //   right: -6px;
    //   font-size: 12px;
    //   border-radius: 50%;
    //   color: #ffffff;
    //   background-color: red;
    // }
    .child {
      width: 40px;
      height: 40px;
      background: #f2f3f5;
      border-radius: 4px;
    }
  }
}
</style>
